import 'dart:io' show Platform;
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/block_picker.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:flutter_colorpicker/material_picker.dart';

class Home extends StatefulWidget {

  final String title;

  Home({Key key, this.title}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  // create some values
  Color _pickerColor = Color(0xff443a49);
  Color _currentColor = Color(0xff443a49);

  // ValueChanged<Color> callback
  void changeColor(Color color) {
    setState(() => _pickerColor = color);
  }

  void _showPanel() {
    // raise the [showDialog] widget
    showDialog(
      context: context,
      child: AlertDialog(
        title: const Text('Pick a color!'),
        content: SingleChildScrollView(
          child: ColorPicker(
            pickerColor: _pickerColor,
            onColorChanged: changeColor,
            enableLabel: true,
            pickerAreaHeightPercent: 0.8,
          ),
          // Use Material color picker:
          //
          // child: MaterialPicker(
          //   pickerColor: _pickerColor,
          //   onColorChanged: changeColor,
          //   enableLabel: true, // only on portrait mode
          // ),
          //
          // Use Block color picker:
          //
          // child: BlockPicker(
          //   pickerColor: _currentColor,
          //   onColorChanged: changeColor,
          // ),
          ),
          actions: <Widget>[
            FlatButton(
              child: const Text('Got it'),
              onPressed: () {
                setState(() => _currentColor = _pickerColor);
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      );
  }

  int _counter = 0;

  void _increment() => setState(() { _counter++; });

  void _decrement() => setState(() { _counter--; });

  @override
  Widget build(BuildContext context) {
    
    final TextTheme _theme = Theme.of(context).textTheme;
    final TextStyle _style1 = _theme.body1.copyWith(color: _currentColor);
    final TextStyle _style2 = _theme.display1.copyWith(color: _currentColor);

    final String _os = Platform.operatingSystem;
    final String _hostname = Platform.localHostname;
    final String _numCores = Platform.numberOfProcessors.toString();

    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              FlatButton.icon(
                label: Text('Set Color'),
                icon: Icon(Icons.color_lens),
                onPressed: _showPanel,
                clipBehavior: Clip.none,
              ),
              FlatButton.icon(
                label: Text('Counter +'),
                icon: Icon(Icons.add_circle),
                onPressed: _increment,
                clipBehavior: Clip.none,
              ),
              FlatButton.icon(
                label: Text('Counter -'),
                icon: Icon(Icons.remove_circle),
                onPressed: _decrement,
                clipBehavior: Clip.none,
              )
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text('OS: ' + _os, style: _style1),
              Text("Hostname: " + _hostname, style: _style1),
              Text('CPU Cores:' + _numCores, style: _style1),
              Text('$_counter', style: _style2)
            ],
          )
        ],
      ),
    );
  }
}